<template>
  <el-dialog :close-on-click-modal="false" :visible.sync="isShowEdit" @close="cancel"
    :before-close="cancel">
    <div class="addFormBox">
      <div v-for="(item, index) in editInfo" :key="index">
        <div class="formOuterBox">
          <div class="formCotantBox">
            <h3>项目 {{ index + 1 }}</h3>
            <!-- 表单内容 -->
            <el-form label-width="80px">
              <el-form-item label="项目名" prop="proName">
                <el-input v-model="item.proName" placeholder="请输入项目名称"></el-input>
              </el-form-item>
              <el-form-item label="完成内容" prop="content">
                <el-input v-model="item.content" type="textarea" :rows="2" placeholder="请输入项目完成情况"></el-input>
              </el-form-item>
              <el-form-item label="进度">
                <div class="block">
                  <el-slider v-model="item.situation" show-input>
                  </el-slider>
                </div>
              </el-form-item>
              <el-form-item label="下周计划" prop="nextPlan">
                <el-input v-model="item.nextPlan" type="textarea" :rows="2" placeholder="请输入下周工作计划"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <el-button v-if="formData.length > 1" @click="removeIdx(item, index)" type="danger">删除此条信息</el-button>
        </div>
      </div>

      <!-- 测试按钮 -->
      <!-- <button @click="test">测试</button> -->
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitFrom">提 交</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addWeekReport ,editWeekReport} from "@/api/request";
export default {
  name: 'editWeekTable',
  props: ['isShowEdit', 'editInfo','editData'],

  data() {
    return {
      tableInfo: null,
      formData: [
        {
          proName: '',//项目名称
          content: '',//完成的内容
          situation: 0,//进度百分比
          nextPlan: '',//下周计划
        }
      ],
      submitData: {
        username: this.$store.state.user.name,
        userId: this.$store.state.user.userId,
        briefSummary: '',
        timeId: ''
      }
    };
  },
  methods: {


    //判断表单信息是否有为空的
    issubmit() {
      var isSub = true
      for (var i = 0; i < this.editInfo.length; i++) {
        if (this.editInfo[i].proName == '' || this.editInfo[i].content == '' || this.editInfo[i].nextPlan == '') {
          isSub = false
        }
      }
      return isSub
    },

    //点击取消按钮
    cancel() {
      this.submitData = {
        username: this.$store.state.user.name,
        userId: this.$store.state.user.userId,
        briefSummary: '',
        id: ''
      }
      this.formData = [
        {
          proName: '',//项目名称
          content: '',//完成的内容
          situation: 0,//进度百分比
          nextPlan: '',//下周计划
        }
      ]
      this.$emit('handleCloseEdit')
    },
    //点击提交
    submitFrom() {
      this.submitData.briefSummary = JSON.stringify(this.editInfo);
      this.submitData.id = this.editData.id
      //判断是否可以提交
      this.issubmit()
      // 提交表单数据
      if (this.issubmit()) {
        editWeekReport(this.submitData).then(res => {
          // 提交数据成功后将表单数据清空重置
          this.formData = [
            {
              proName: '',//项目名称
              content: '',//完成的内容
              situation: 0,//进度百分比
              nextPlan: '',//下周计划
            }
          ]
          this.submitData = {
            username: this.$store.state.user.name,
            userId: this.$store.state.user.userId,
            briefSummary: '',
            timeId: ''
          }
          //关闭表单
          this.cancel()
        }).catch(err => {
          console.log('提交失败')
        })
      } else {
        this.$message.warning("请完善信息！")
      }

      //
    },
    //添加一条记录
    addMore() {

      //定义标识判断是否可以添加
      let flag = true;
      this.formData.forEach((item) => {
        //表单没有填完将标识设为false，填完为true
        if (item.proName == '' || item.content == '' || item.situation == null || item.nextPlan == '') {
          this.$message({
            message: '请完善信息后在添加',
            type: 'warning'
          })
          flag = false
        }
      });
      //填完后将flag 设为true,添加下一条记录
      if (flag) {
        this.formData.push({
          proName: '',//项目名称
          content: '',//完成的内容
          situation: 0,//进度百分比
          nextPlan: '',//下周
        })
      }
    },
    //删除一条记录
    removeIdx(item, index) {
      this.formData.splice(index, 1)
      this.$message({
        message: '删除成功',
        type: 'success'
      })
    },
  },
};
</script>
<style scoped>
/* .addFormBox {
  margin: 20px;
} */
.el-dialog__body {
  padding: 20px 20px;
}

.formOuterBox {
  margin-bottom: 20px;
  /* padding: 30px 40px; */
  background: white;
  border-radius: 30px;
}
</style>
